import React from 'react';
import {
	IonContent,
	IonHeader,
	IonCard,
	IonCardHeader,
	IonCardSubtitle,
	IonCardTitle,
	IonCardContent,
	IonPage,
	IonTitle,
	IonToolbar,
	IonButtons,
	IonBackButton
} from '@ionic/react';

// native
import { Camera } from '@awesome-cordova-plugins/camera';
import { VideoPlayer } from '@awesome-cordova-plugins/video-player';
// SCss
import indexScssStyle from './detail.module.scss';
// DATA

const JSONDATA = require('../../data/artice.json');
const ArticlDetail = (props) => {
	return (
		<IonPage>
			{/*header*/}
			<IonContent>
				<IonHeader className="ion-no-border">
					<IonToolbar>
						<IonButtons slot="start">
							<IonBackButton defaultHref="/" />
						</IonButtons>
						<IonTitle>{JSONDATA.mainTitle}</IonTitle>
					</IonToolbar>
				</IonHeader>
				{/*食材*/}

				{/*步骤*/}

				{JSONDATA.steps.length != 0 ? (
					JSONDATA.steps.map((item, index) => {
						return (
							<div key={'LI_' + index} className={`${[indexScssStyle.ul].join(' ')}`}>
								<IonCard>
									<IonCardHeader>
										<IonCardSubtitle>步骤{index + 1}</IonCardSubtitle>
										<IonCardTitle>{item.title}</IonCardTitle>
									</IonCardHeader>
									<iframe
										frameBorder="0"
										src={item.video}
										className={`${[indexScssStyle.ifarme].join(' ')}`}
									>
										<video controls autoPlay src={item.video}>
											<source src={item.video} type="video/mp4" />
										</video>
									</iframe>
									<IonCardContent>{item.content}</IonCardContent>
								</IonCard>
							</div>
						);
					})
				) : (
					<div>暂无信息</div>
				)}

				{/*评论*/}
			</IonContent>
		</IonPage>
	);
};
export default ArticlDetail;
